#@layout()
#@mirror()
#define main()
<script src="/static/js-beautify/beautify.min.js"></script>
<script src="/static/js-beautify/beautify-css.min.js"></script>
<script src="/static/js-beautify/beautify-html.min.js"></script>
<script>
var editor = null;
$(function() {
    editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        name: "javascript",
        json: true,
        theme: "darcula"
    });

})

var option = {
    "indent_size": "4",
    "indent_char": " ",
    "max_preserve_newlines": "5",
    "preserve_newlines": true,
    "keep_array_indentation": false,
    "break_chained_methods": false,
    "indent_scripts": "normal",
    "brace_style": "collapse",
    "space_before_conditional": true,
    "unescape_strings": false,
    "jslint_happy": false,
    "end_with_newline": false,
    "wrap_line_length": "0",
    "indent_inner_html": false,
    "comma_first": false,
    "e4x": false,
    "indent_empty_lines": false
}

function format() {
    var code = editor.getValue();
    var sel = $("#select").val();
    var formatStr;
    if (sel == 1) {
        formatStr = html_beautify(code, option);
    } else if (sel == 2) {
        formatStr = css_beautify(code, option);
    } else if (sel == 3) {
        formatStr = js_beautify(code, option);
    }
    editor.setValue(formatStr);
}
</script>
<div class="">
    <div class="container">
        #@mirrorBody()
        <div class="row">
            <div class="col-lg-8">
                <select id="select" class="btn bg-primary text-white">
                    <option value="1">html</option>
                    <option value="2">css</option>
                    <option value="3">js</option>
                </select>
                &nbsp;
                <input type="button" onclick="format()" value="格式化" class="btn btn-primary"/>
            </div>
            <div class="col-lg-8">
                <span id="error"></span>
            </div>
        </div>
    </div>
</div>
#end